<template>
  <div class="settings-container">
    <h2>设置</h2>
    
    <el-card class="settings-section">
      <template #header>
        <div class="section-header">
          <span>下载设置</span>
        </div>
      </template>
      <el-form label-width="120px">
        <el-form-item label="下载目录">
          <el-input v-model="settings.downloadPath" readonly>
            <template #append>
              <el-button @click="selectDownloadPath">选择</el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="下载音质">
          <el-select v-model="settings.quality">
            <el-option label="标准" value="standard" />
            <el-option label="高清" value="high" />
            <el-option label="无损" value="lossless" />
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
    
    <el-card class="settings-section">
      <template #header>
        <div class="section-header">
          <span>界面设置</span>
        </div>
      </template>
      <el-form label-width="120px">
        <el-form-item label="主题">
          <el-radio-group v-model="settings.theme">
            <el-radio label="light">浅色</el-radio>
            <el-radio label="dark">深色</el-radio>
            <el-radio label="auto">跟随系统</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="语言">
          <el-select v-model="settings.language">
            <el-option label="简体中文" value="zh-CN" />
            <el-option label="English" value="en-US" />
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
    
    <el-card class="settings-section">
      <template #header>
        <div class="section-header">
          <span>系统设置</span>
        </div>
      </template>
      <el-form label-width="120px">
        <el-form-item label="开机启动">
          <el-switch v-model="settings.autoStart" />
        </el-form-item>
        <el-form-item label="最小化到托盘">
          <el-switch v-model="settings.minimizeToTray" />
        </el-form-item>
        <el-form-item label="自动检查更新">
          <el-switch v-model="settings.autoUpdate" />
        </el-form-item>
      </el-form>
    </el-card>
    
    <el-card class="settings-section">
      <template #header>
        <div class="section-header">
          <span>关于</span>
        </div>
      </template>
      <div class="about-info">
        <p><strong>酷狗音乐克隆版</strong></p>
        <p>版本: v1.0.0</p>
        <p>基于 Electron + Vue3 开发</p>
        <el-button type="primary" @click="checkUpdate">检查更新</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const settings = ref({
  downloadPath: 'C:\\Users\\Music\\Downloads',
  quality: 'high',
  theme: 'light',
  language: 'zh-CN',
  autoStart: false,
  minimizeToTray: true,
  autoUpdate: true
})

const selectDownloadPath = () => {
  console.log('选择下载目录...')
  // 这里应该调用Electron的API打开目录选择器
}

const checkUpdate = () => {
  console.log('检查更新...')
  // 这里应该调用更新检查API
}
</script>

<style scoped>
.settings-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.settings-container h2 {
  margin-bottom: 20px;
  color: #303133;
}

.settings-section {
  margin-bottom: 20px;
}

.section-header {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.about-info {
  text-align: center;
  padding: 20px;
}

.about-info p {
  margin-bottom: 10px;
  color: #606266;
}
</style>
